<template>
	<view class="content">

		<div class="home-header">
			<div v-for="(c,i) in list" :key="i" @click="homeAddGo(i)">
				<div><img :src="c.icon"></div>
				<div>{{c.title}}</div>
			</div>
		</div>


		<view class="home-center">

			<view class="home-center-list" v-for="(c,i) in eachatrs" :key="i">
				<view class="home-center-list-top">
					{{c.title}}

				</view>


				<!-- 	<view class="home-center-list-center" ref="sd" >

					<view class="home-center-list-center-list" v-for="(cc,ii) in c.elist" @touchstart="touchstart(i)"
						:key="ii">
						<view class="home-center-list-center-list-top">
							<view></view>
							{{cc.center}}
						</view>
						<view class="home-center-list-center-list-center1" v-if="cc.li">
							<view v-if="cc.li">
								{{cc.li.text}}
							</view>
							<view v-if="cc.li">
								{{cc.li.yeoow}}
							</view>
						</view>
						<view class="home-center-list-center-list-center2" v-if="cc.lis">
							<view v-if="cc.lis">
								{{cc.lis.text}}
							</view>
							<view v-if="cc.lis">
								{{cc.lis.yeoow}}
							</view>

							<view v-if="cc.lis">
								{{cc.lis.li}}
							</view>

							<view v-if="cc.lis">
								{{cc.lis.t}}
							</view>

						</view>
						<div :id="cc.class">
						</div>
						<view class="positonio">
							<view>
								查看
							</view>
							<view>
							</view>
						</view>
					</view>

				</view> -->


				<scroll-view scroll-x="true" class="home-center-list-center" @scroll="scroll">
					<block v-for="(cc,ii) in c.elist"  :key="ii">
<view class="home-center-list-center-list" @touchstart="touchstart(i)">
						<view class="home-center-list-center-list-top">
							<view></view>
							{{cc.center}}
						</view>
						<view class="home-center-list-center-list-center1" v-if="cc.li">
							<view v-if="cc.li">
								{{cc.li.text}}
							</view>
							<view v-if="cc.li">
								{{cc.li.yeoow}}
							</view>
						</view>
						<view class="home-center-list-center-list-center2" v-if="cc.lis">
							<view v-if="cc.lis">
								{{cc.lis.text}}
							</view>
							<view v-if="cc.lis">
								{{cc.lis.yeoow}}
							</view>

							<view v-if="cc.lis">
								{{cc.lis.li}}
							</view>

							<view v-if="cc.lis">
								{{cc.lis.t}}
							</view>

						</view>
						<div :id="cc.class">
						</div>
						<view class="positonio">
							<view>
								查看
							</view>
							<view>
							</view>
						</view>
					</view>
					</block>
					
				</scroll-view>



				<view class="home-center-list-footer">
					<view class="home-center-list-footer-one">
						<view class="aaa" :style="{'left':c.left+'px'}">

						</view>

					</view>

				</view>
			</view>

		</view>


		<view class="footer">

		</view>



	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import listt from './index.js'


	export default {
		data() {
			return {
				list: [{
						title: '集团资金',
						icon: require("./imgs/home/1.png")
					},
					{
						title: '集团融资',
						icon: require("./imgs/home/2.png")
					},
					{
						title: '地区资金',
						icon: require("./imgs/home/3.png")
					},
					{
						title: '地区融资',
						icon: require("./imgs/home/4.png")
					},
					{
						title: '供应链',
						icon: require("./imgs/home/5.png")
					}
				],
				eachatrs: [{
						title: "集团资金",
						elist: [{
								center: '集团资金',
								li: {
									text: '余额',
									yeoow: '50.06亿元',
								},
								class: 'node-one'

							},
							{

								center: '集团资金航道分布',
								class: 'node-one2'
							},
							{
								center: '集团资金',
							},
							{
								center: '集团资金航道分布',
							},


						],
						left: 0



					},
					{
						title: "集团融资",
						elist: [{
								center: '集团融资',
								lis: {
									text: '贷款余额',
									yeoow: '1,008.4',
									li: '全口径',
									t: '其中四大行贷款余额合计676.5亿'
								}

							},
							{
								center: '集团融资',
								class: 'main3'
							},
							{
								center: '集团融资',
							},
							{
								center: '集团融资',
							}
						],
						left: 0


					},
					{
						title: "地区资金",
						elist: [{
								center: '地区资金',
								lis: {
									text: '贷款余额',
									yeoow: '1,008.4',
									li: '全口径',
									t: '其中四大行贷款余额合计676.5亿'
								}
							},
							{
								center: '地区资金',
								class: 'main4'
							},
							{
								center: '集团融资',

							},
							{
								center: '集团融资',
							}
						],
						left: 0


					}
				],
				index: 0,
				listt: listt,
				i:''

			}
		},
		onLoad() {
			console.log(listt)

		},
		mounted() {
			

			var chartDom2 = document.getElementById('main3');
			var myChart2 = echarts.init(chartDom2);
			var options = listt.option
			options && myChart2.setOption(options);



			var chartDom23 = document.getElementById('main4');
			var myChart3 = echarts.init(chartDom23);

			options && myChart3.setOption(options);


			uni.request({
				url: "longfor/ldrlist",
				method: 'get',
				data: {
					depositCAL: 'F',
					loanCAL: 'C',
					mortgageCAL: 'A',
					bank: '',
					area: '',
					startTime: '2020-01-02',
					endTime: '2020-01-05',
					LDRCAL: '1'
				}

			}).then(res => {
				console.log(res)
			})




			var chartDom = document.getElementById('node-one');
			var chartDom1 = document.getElementById('node-one2');
			var myChart = echarts.init(chartDom);
			var myChart1 = echarts.init(chartDom1);
			var option;

			option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: [{
						orient: 'horizontal',
						itemWidth: 10,
						itemHeight: 10,
						left: '2%',
						bottom: '-5%',
						data: ['I类型', 'II类型']
					},

				],

				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '15',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: 335,
							name: 'I类型',
							itemStyle: {
								color: "#4F7BD6"
							}
						},

						{
							value: 310,
							name: 'II类型',
							itemStyle: {
								color: "#61CBCC"
							}
						},
						{
							value: 234,
							name: '联盟广告',
							itemStyle: {
								color: "#7D88F4"
							}
						},
						{
							value: 135,
							name: '视频广告',
							itemStyle: {
								color: "#CC6781"
							}
						},
						{
							value: 100,
							name: '搜索引擎',
							itemStyle: {
								color: "#FFC46A"
							}
						}
					]
				}]
			};

			option && myChart.setOption(option);
			option && myChart1.setOption(option);
		},
		
		methods: {
			scroll(e){
				let s=363
			let sd=   Number(((e.target.scrollLeft/s)*100).toFixed(2))	
			
			let zc=35
			this.eachatrs[this.i].left=((sd/100)*35).toFixed(2)
				 
			},
			asd(i) {
				console.log(i)
			},

			homeAddGo(i) {
				if (i == '1') {
					uni.navigateTo({
						url: '../financingT/fianci1/fianci1',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

				if (i == '0') {
					uni.navigateTo({
						url: '../financeS/financeS',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

				if (i == '2') {
					uni.navigateTo({
						url: '../regional/regional',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

				if (i == '3') {
					uni.navigateTo({
						url: '../GroupO/GroupO',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

				if (i == '4') {
					uni.navigateTo({
						url: '../supplyW/supplyW',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			getPercent(num, total) {
				num = parseFloat(num);
				total = parseFloat(total);
				if (isNaN(num) || isNaN(total)) {
					return "-";
				}
				return total <= 0 ? "0%" : Math.round((num / total) * 10000) / 100.0;
			},

			touchstart(i) {
				this.i=i
			},

		}
	}
</script>

<style lang="scss" scoped>
	#main3 {
		width: 100%;
		height: 300upx;
		margin-top: -96upx;

	}

	#main4 {
		width: 100%;
		height: 300upx;
		margin-top: -96upx;

	}

	.home-center-list-center-list-center2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		view:nth-child(1) {
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999999;

		}

		view:nth-child(2) {
			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #F4B544;
			margin-top: 20upx;
			margin-bottom: 15upx;
		}

		view:nth-child(3) {
			font-size: 18upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}

		view:nth-child(4) {
			position: absolute;
			font-size: 16upx;
			font-family: Microsoft YaHei;
			font-weight: 700;
			color: #333333;
			bottom: 14upx;
			left: -56upx;
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}

	}

	#node-one {
		width: 335upx;
		height: 238upx;
		margin-top: -60upx;
		transform: scale(0.8);
	}

	#node-one2 {
		width: 335upx;
		height: 238upx;
		margin-top: -35upx;
		transform: scale(0.9);
	}

	.positonio {}

	.home-center-list-center-list-center1 {
		width: 100%;
		display: flex;

		view:nth-child(1) {
			width: 52upx;
			height: 25upx;
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999999;
			margin-left: 19upx;
			margin-right: 103upx;
		}

		view:nth-child(2) {
			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #F4B544;
		}

	}

	.footer {
		width: 100vw;
		height: 100upx;
	}

	.content {
		width: 100%;
		background-color: #F5F5F5;
	}

	.home-center-list-footer {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 24upx;

		.home-center-list-footer-one {
			width: 109upx;
			height: 9upx;
			background: #B2C8F1;
			border-radius: 5upx;
			position: relative;

			.aaa {
				width: 36upx;
				height: 9upx;
				background: #013AAC;
				border-radius: 5upx;
				position: absolute;
			}
		}
	}

	.home-center {
		width: 100vw;
		padding: 0 30upx;

		.home-center-list-top {

			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			margin: 28upx 0;

		}

		.home-center-list-center {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
		height: 285upx;
		margin: 0 auto;
		}

		.home-center-list-center-list {
			width: 335upx;
			height: 283upx;
			display: inline-block;
			vertical-align: top;
			
			background: #FFFFFF;
			border-radius: 20upx;
			flex-grow: 0;
			flex-shrink: 0;
			margin-right: 20upx;
			position: relative;

			.positonio {
				position: absolute;
				bottom: 10upx;
				right: 42upx;
				font-size: 18upx;
				font-family: Microsoft YaHei;
				font-weight: 300;
				color: #003894;
				display: flex;
				align-items: center;


				view:nth-child(2) {
					width: 18upx;
					height: 18upx;
					border: 1px solid #003894;
					border-top: none;
					border-left: none;
					transform: rotate(-45deg);
					margin-right: -10upx;
				}
			}

		}

		.home-center-list-center-list-top {
			display: flex;
			padding: 20upx;

			>view {
				width: 4upx;
				height: 30upx;
				background: #BCDC93;
				margin-right: 14upx;

			}

			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #666666;
		}

	}



	.home-header {
		width: 100vw;
		height: 217upx;
		background: linear-gradient(90deg, #0039AC, #4C75C5);
		display: flex;
		align-items: center;
		justify-content: space-around;

		img {
			width: 59upx;
			height: 56upx;
		}

		>div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #fff;
		}
	}
</style>
